<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stroke Master</title>
    <link rel="shortcut icon" href="/static/imgs/favicon.ico" type="image/vnd.microsoft.icon"/>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/fontawesome.min.css">
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/jquery.mloading.css">
    <link rel="stylesheet" href="/static/css/viewer.css">
    <script src="/static/sweetalert/dist/sweetalert.min.js"></script>
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/viewer.js"></script>
    <style>
        .Stitle {
            font-family: Kaiti;
        }

        .Stitle2 {
            font-family: Youyuan;
            color: white;
            text-shadow: -2px 0 black,
            0 2px black,
            2px 0 black,
            0 -2px black;
        }

        #btn {
            background: #4ce0b0;
        }

        button {
            background: linear-gradient(to bottom, #71f1c3 0%, #4ce0b0 100%);
            border-bottom: 4px solid #4ce0b0;
        }

        button:after {
            border-top: 20px solid #71f1c3;
            border-bottom: 20px solid #71f1c3;
            border-right: 20px solid #71f1c3;
        }

        button.back:after {
            border-top: 20px solid #71f1c3;
            border-bottom: 20px solid #71f1c3;
            border-left: 20px solid #71f1c3;
        }

        .testimonial_blog:hover {
            box-shadow: 50px 50px 0 0 #4ce0b0;
            transition: all 0.2s linear;
        }

        .relation {
            font-size: 24px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 25px;
        }

        ul li {
            text-align: center;
        }

        table tr td img {
            width: 100%;
        }

        table tr td {
            text-align: center;
        }

        .img-list {
            display: inline;
        }

        .img-list li {
            display: block;
            width: 400px;
            margin: 0;
        }

        .img-list li img {
            width: 400px;
        }

    </style>
</head>
<body style="background: url('/static/imgs/BGM2.jpg') no-repeat;
                background-size: 100% 100%;
                background-attachment: fixed;">
<div id="wcs" class="hiw_section layout_padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text_align_center">
                <h1 class="Stitle">☃ 中风预测可视化数据 ☃</h1>
                <hr>
                <p>利用 “机器学习” 技术一方面能提高医师的诊断效率，有利于减轻医生的诊断压力，快速进行中风预测。</p>
                <hr>
                <br>
            </div>
            <div class="col-md-5">
            </div>
        </div>
        <div class="row">
            <div class="col-md-11">
                <div class="full testimonial_blog" style="color: white;">
                    <h3 class="Stitle2">中风数据可视化</h3>
                    <hr>
                    <p>通过中风预测数据可视化处理，方便研究机器学习运算过程。</p>
                    <ul id="images1" class="img-list">
                        <li style="width: 100%;">
                            <img src="/static/data/img/age.jpg" style="width: 100%;">
                            <br><br>
                            <p>中风年龄条形分布图</p>
                            <hr>
                        </li>
                        <table>
                            <tr>
                                <td>
                                    <img src="/static/data/img/Thermodynamic.jpg" style="width: 425px;">
                                    <br><br>
                                    <p>中风关系热力图</p>
                                    <hr>
                                </td>
                                <td>
                                    <img src="/static/data/img/gender.jpg" style="width: 485px;">
                                    <br><br>
                                    <p>中风与性别关系图</p>
                                    <hr>
                                </td>
                            </tr>
                        </table>
                        <table>
                            <tr>
                                <td>
                                    <img src="/static/data/img/work_type.jpg" style="width: 455px;">
                                    <br><br>
                                    <p>中风与工作类型关系图</p>
                                    <hr>
                                </td>
                                <td>
                                    <img src="/static/data/img/smoking_status.jpg" style="width: 455px;">
                                    <br><br>
                                    <p>中风与吸烟状态关系图</p>
                                    <hr>
                                </td>
                            </tr>
                        </table>
                        <table>
                            <tr>
                                <td>
                                    <img src="/static/data/img/Stroke Model.jpg" style="width: 520px;">
                                    <br><br>
                                    <p>基于Stroke的多种分类模型箱线图</p>
                                    <hr>
                                </td>
                                <td>
                                    <img src="/static/data/img/KNN_ROC.jpg" style="width: 390px;">
                                    <br><br>
                                    <p>KNN模型图像-KNN_ROC</p>
                                    <hr>
                                </td>
                            </tr>
                        </table>
                        <li style="width: 100%;">
                            <img src="/static/data/img/tree_visualization.jpg" style="width: 50%;">
                            <br><br>
                            <p>决策树流程图</p>
                        </li>
                    </ul>
                    <br>
                    <a href="/" style="text-decoration: underline;color: #4ce0b0;">返回主界面</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/jquery.mloading.js"></script>
<script>
    $(function () {
        'use strict';
        var winH = $(window).height();
        $('header').height(winH);
        $('header .container > div').css('top', (winH / 2) - ($('header .container > div').height() / 2));
        $('.navbar ul li a.search').on('click', function (e) {
            e.preventDefault();
        });
        $('.navbar a.search').on('click', function () {
            $('.navbar form').fadeToggle();
        });
        $('.navbar ul.navbar-nav li a').on('click', function (e) {
            var getAttr = $(this).attr('href');
            e.preventDefault();
            $('html').animate({scrollTop: $(getAttr).offset().top}, 1000);
        });
        $("#btn").click(function () {
            $("#fileinp").trigger('click');
        });
        $("#fileinp").change(function () {
            $("#text").html($("#fileinp").val());
        });

        $("#btn2").click(function () {
            $("#fileinp2").trigger('click');
        });
        $("#fileinp2").change(function () {
            $("#text2").html($("#fileinp2").val());
        });
    })
</script>
<script>
    var viewer = new Viewer(document.getElementById('images1'), {});
</script>
</body>
</html>